import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import twopagecss from "../styles/twopage.module.scss";
import { Delbox } from "../actions/addboxAction";

export default function learning() {
  const listboxs = useSelector((state: any) => state.listboxs.list);
  // console.log(listboxs);
  const [flag, setflag] = useState(0);
  const dispatch = useDispatch();
  let del = (id: any) => {
    // console.log(id);
    dispatch(Delbox(id));
  };
  return (
    <div>
      {listboxs.map((item: any) => {
        return (
          <div
            className={twopagecss.addboxed}
            style={{ position: "relative" }}
            key={item.id}
            onMouseEnter={() => {
              setflag(item.id);
            }}
            onMouseLeave={() => {
              setflag(0);
            }}>
            {item.msg}
            {flag == item.id ? (
              <div
                className={twopagecss.x}
                onClick={() => {
                  del(item.id);
                }}
                key={item.id}>
                ×
              </div>
            ) : (
              ""
            )}
          </div>
        );
      })}
    </div>
  );
}
